.navbar
  .navbar-inner
    .left.sliding
      a(href="index.html").back.link
        i.icon.icon-back
        span Back
    .center.sliding Preloader
    .right
      a(href="#").link.open-panel.icon-only
        i.icon.icon-bars
.pages.navbar-through
  .page(data-page="preloader")
    .page-content
      .content-block
        p How about an activity indicator? Framework 7 has a nice one. The F7 preloader is made with SVG and animated with CSS so it can be easily resized. Two options are available: the default is for light background and another one is for dark background. The HTML is pretty easy, just add a .preloader class to any element. For the dark background option, also add a .preloader-white class. Here are some examples:
      .content-block.row.ks-preloaders
        .col-25 Default:<br>
          span.preloader
        .col-25(style="background-color: #222; color:#fff;") White:<br>
          span.preloader.preloader-white
        .col-25 Big:<br>
          span.preloader.ks-preloader-big
        .col-25(style="background-color: #222; color:#fff;") White:<br>
          span.preloader.preloader-white.ks-preloader-big
      .content-block
        p With <b>app.showIndicator()</b> you can call small overlay with indicator:
        a(href="#").button.demo-indicator Open small indicator overlay
        p With <b>app.showPreloader()</b> you can call modal window with preloader:
        a(href="#").button.demo-preloader Open preloader modal
        p With <b>app.showPreloader('My text...')</b> you can call it with custom title:
        a(href="#").button.demo-preloader-custom Open custom preloader
